<template>
  <div class="login">
  <div class="flex-line maincontent" style="border-bottom: 1px solid #f6f6f6;">
    <a href="/index.html" class="logo"><img alt="" :src="logoUrl"></a>   
    <!--<a class="kf"><img alt="" src="/images/static/cs.gif"></a>-->
  </div>
  <div class="loginbox">
    <div class="logininfoline">
      <div class="lable">用&nbsp;&nbsp;户&nbsp;&nbsp;名：</div>
      <div class="inputbox">
        <div class="input">
          <input type="text" class="" name="loginName"  maxlength="16" v-model="loginName">
        </div>
        <div class="tips">
           2-16个字符(字母、数字)
        </div>
      </div>
    </div>
    <div class="logininfoline">
      <div class="lable">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</div>
      <div class="inputbox">
        <div class="input">
          <input type="password" class="" name="password" maxlength="16" v-model="password">
        </div>
        <div class="tips">
          2-16个字符(字母、数字、下划线)
        </div>
      </div>
    </div>
    <div class="logininfoline">
      <div class="lable">验&nbsp;&nbsp;证&nbsp;&nbsp;码：</div>
      <div class="inputbox">
        <div class="input">
          <input type="text" class="" name="imgCode" id="imgCode" onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')" maxlength="4" v-model="imgCode">
          <img :src="code" id="checkCode" v-on:click="getCheckCode()">
        </div>
        <div class="tips">
        </div>
      </div>
    </div>
    <div class="logininfoline">
      <div class="lable"></div>
      <div class="inputbox">
        <div class="btn loginbtn" id="loginbtn" v-on:click="login()">登录</div>
        <router-link class="regbtn btn " to="/register">注册</router-link>
      </div>
    </div>
  </div>
  <footer>
    <div class="wrap">
      <p>提醒：理性购彩，热爱公益 我们承诺不向未满18周岁的青少年出售彩票！</p>
      <p>版权所有 @ 信息技术有限公司 </p>
    </div>
  </footer>
  <div id="kefubox"></div>
  </div>
</template>

<script>
import {baseObj} from '../util/util' 
import {config} from '../util/util' 

export default {
  name: 'login',
  data () {
    return {
      logoUrl: '../../static/images/logo.jpg',
      loginName: '',
      password: '',
      imgCode: '',
      code: 'api/api/baseData_checkCode',
      user: {
        uid: '',
        loginName: '',
        cellPhone: '',
        userName: '',
        email: '',
        password: '',
        money: '',
        u: '',
        points: ''
      }
    }
  },
  methods: {
    //验证码
    login: function(){
      var map = {};
      map['loginName'] = this.loginName;
      map['password'] = baseObj.getMd5(this.password).toUpperCase();
      map['imgCode'] = this.imgCode;
      map['machineType'] = '3';
      var mw=baseObj.mw(map);
      this.$http.get('api/api/user_login',{
        params:{
          mw: mw
        }
      }).then((response) => {
        console.log(response.data.code);
        var code = response.data.code;
        var msg = response.data.msg;
        if ( '200'=== code ) {
          var result = response.data.data;
          var obj = result.obj;
          this.user.uid = obj.uid;
          this.user.u = obj.u;
          this.user.loginName = obj.loginName;
          this.user.userName = obj.userName;
          this.user.points = obj.point;
          this.user.money = obj.money;
          // this.user = 
          this.$store.commit('loginUser',this.user);
          mui.toast('登陆成功',{ duration:'long', type:'div' });
          console.log("==="+this.$route.query.redirect);
          this.$router.push(this.$route.query.redirect || '/')
        }else{
          mui.alert(msg, function() {});
        }
      })
    },
    //验证码
    getCheckCode: function(){
      var timestamp = Date.parse(new Date());
      this.code = "api/api/baseData_checkCode?t="+timestamp
      console.log(this.code);
      // this.$http.get('api/api/baseData_checkCode?t='+timestamp).then((response) => {
      //   // this.code = response.data;
      //   console.log(this.code);
      //   // var code = response.data.code;
      //   // if ( '200'=== code ) {
      //   //   var result = response.data.data;
      //   //   this.items = result.items;
      //   // }
      // })
    }
  },
  created:function() {
    this.getCheckCode();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@CHARSET "UTF-8";
html{font-size: 62.5%;}   
body{font-size: 14px;font-size: 1.4rem;background-color: #EEE;}   
html,body{pading:0;margin:0;
font-family: 'Century Gothic', "Microsoft YaHei", Trebuchet MS, Arial,
    Verdana, Tahoma, "DejaVu Sans", "Liberation sans",
    "Bitstream Vera Sans", sans-serif;font-size: 14px;font-size:71.4%; }
h1,h2,h3,h4,h5,ul,p,form{padding:0px;margin:0px;}
.fl{float: left;}
.fr{float: right;}

.content{width: 85%;margin: auto;margin-top: 60px;}
header.title{font-size:25px;font-size: 2.5rem; color: #52993C;height: 60px;line-height: 60px;font-family: Times new Roman}
.box{ border-radius: 5px ;box-shadow : 0px 0px 5px #bbb;background: #fff;overflow: hidden;}
.box p.title{height: 3.8rem;line-height: 3.8rem;border-bottom: 1px solid #ddd;padding-left: 2.0rem;font-size: 1.6rem;background-color: #FBFCFE}
.box p.title span{border-bottom: 0.3rem solid #848484;display: block;height: 3.7rem;width: 7rem;text-align: center;}
.box .from{}
.box .from .item{width: 80%;margin: 20px auto;position: relative;overflow: hidden;}
.box .from .input{border: 1px solid #ccc;border-radius: 3px;height: 3.8rem;width: 98%;font-size: 1.8rem;text-indent: 50px;}
.ico{background: url("../../static/images/input_icons.png") no-repeat scroll 0 0px transparent ;position: absolute;width: 45px;height: 45px;top: 0.1rem;left: 0;}
.username{background-position:-5px -143px; }
.password{background-position:-5px -299px; }
a.btn{text-decoration: none;}
.btn{border-radius: 5px ;font-size: 2.0rem;color: #fff;border: none;padding:5px 20px;cursor: pointer;margin: 0 5px;}
.btn-748f62{background-color: #59A641;}
.btn-748f62:HOVER{background-color: #5DAD44;}
.btn-grey{background-color: #999;}
.btn-grey:HOVER{background-color: #aaa;}
.border-orange{border: 1px solid #f33;}

/*海豚彩票用户端样式*/
.loginbox{background-color: #fff;width: 800px;margin: 30px auto;overflow: hidden;}
.loginbox .logininfoline{overflow: hidden;}
.loginbox .logininfoline .lable{width: 120px;float: left;height: 40px;line-height: 40px;text-align: right;font-size: 14px;color: #666;}
.loginbox .logininfoline .inputbox{width: 680px;float: right;}
.loginbox .logininfoline .inputbox input{margin-bottom: 0;width: 300px;}
.loginbox .logininfoline .tips{height: 30px;color: #999;line-height: 30px;}
.loginbox .logininfoline #imgCode{width: 230px;}
.loginbox .logininfoline #checkCode{width: 60px;}
.loginbox .logininfoline .loginbtn{display:inline-block;width: 190px;background: #f33;height: 40px;line-height: 40px;color: white; font-size: 18px;padding: 0;margin: 0 0 50px 0;}
.loginbox .logininfoline .border-orange{border: 1px solid #f33;}
.loginbox .logininfoline .regbtn{}
.loginbox .logininfoline #regbtn{display:inline-block; width: 190px;font-size: 18px;height: 40px;line-height: 40px;padding: 0;margin: 0;}
.loginbox .logininfoline a.loginbtn{display:inline-block; width: 100px;font-size: 18px;height: 40px;line-height: 40px;padding: 0;margin: 0;}
.loginbox .logininfoline a.regbtn{display:inline-block; width: 100px;font-size: 18px;height: 40px;line-height: 40px;padding: 0;margin: 0;background-color: #007aff;color: #fff;}

.loginbox .logininfoline input[type=text]:FOCUS,.loginbox .logininfoline input[type=password]:FOCUS{border: 1px solid #f33;}

/*<600*/
@media screen and (max-device-width: 600px) {
  header.title{font-size:30px;font-size: 3rem; height: 80px;line-height: 80px;}
    .content{width: 95%;margin: auto;}
    .box .from .item{width: 90%;}
    .box .from .input{height: 3.1rem;width: 91%;font-size: 1.8rem;text-indent: 30px;}
}
/*>900*/
@media screen and (min-width: 900px) {
   .content{width: 400px;margin: auto;margin-top: 70px;}
}
/*600-900*/
@media screen and (min-device-width: 600px) and (max-device-width: 900px) {
  .content{width: 80%;margin: auto;margin-top: 50px;}
}
</style>
